<template>
  <view class="wraps">
    <view class="content">
      <view v-if="state.taskList && state.taskList.length > 0">
        <view class="card" v-for="(item, index) in state.taskList" :key="index">
          <view class="title">
            <view class="time">{{ item.collectTime }}</view>
            <view class="source">
              <text class="ource_name"> 来源： </text>
              <text class="ource_type"> {{ item.dataSource }} </text>
            </view>
          </view>
          <view class="item" v-for="(item1, index1) in item.list" :key="index1">
            <view class="top">
              <text class="name"> {{ typeFun() }} </text>
              <text class="postprandial" v-if="state.type == 'fbg'"
                >{{ item1.fbg ? '空腹' : '餐后' }}
              </text>
              <!-- status red    yellow  orange  green -->
              <text :class="['status', item1.color ? item1.color : '']" v-if="item1.normalFlagName">
                {{ item1.normalFlagName }}
              </text>
              <text class="time">
                {{
                  item1.collectTime
                    ? transformTimeTwo(
                        new Date(item1.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesTwo'
                      )
                    : ''
                }}</text
              >
            </view>
            <view class="min">
              <view class="name" v-if="state.type == 'bmi'">
                <text class="num"> {{ item1.bmi }}</text>
                <text class="unit">kg/㎡</text>
              </view>
              <view class="name" v-if="state.type == 'whr'">
                <text class="num"> {{ item1.whr }}</text>
              </view>
              <view class="name" v-if="state.type == 'sbp'">
                <text class="num"> {{ item1.sbp }}/{{ item1.dbp }}</text>
                <text class="unit">mmHg</text>
              </view>
              <view class="name" v-if="state.type == 'sbp'">
                <text class="num">{{ item1.pulseRate }}</text>
                <text class="unit">bpm</text>
              </view>
              <view class="name" v-if="state.type == 'heart_rate'">
                <text class="num">{{ item1.heartRate }}</text>
                <text class="unit">次/分</text>
              </view>
              <view class="name" v-if="state.type == 'fbg'">
                <text class="num">{{ item1.fbg ? item1.fbg : item1.pbg }}</text>
                <text class="unit">mmol/L</text>
              </view>
              <view class="name" v-if="state.type == 'spo2'">
                <text class="num">{{ item1.spo2 }}</text>
                <text class="unit">%</text>
              </view>
              <view class="remark" @tap="remarkFun(item1)"> 备注 </view>
            </view>
            <view class="bottom" v-if="item1.remark">
              <text class="remark">备注：</text>
              <text class="remarkContent">
                {{ item1.remark }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="nodate" v-else>
        <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
        <view class="nodate_text">
          <text class="name">暂无数据</text>
        </view>
      </view>
    </view>
    <up-popup :show="state.show" :closeable="true" :round="16" mode="center" @close="close">
      <view class="popup-wrap">
        <view class="title">备注</view>
        <view class="textInput">
          <textarea
            class="textarea"
            v-model="state.inputValue"
            placeholder-style="color:#999;font-size:28rpx"
            placeholder="请输入"
            :maxlength="state.maxNum"
          />
          <view class="text-count">{{ inputLength }}/{{ state.maxNum }}</view>
        </view>
        <view class="authenticationBtn">
          <view class="wrapsTwo">
            <view class="cancel" @tap="close">取消</view>
            <view class="goAuthentication" @tap="sure">确定</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, computed, ref, watch } from 'vue'
import { healthInfoMapList, healthInfoUpdate } from '@/api/hmm'
import { transformTimeTwo } from '@/utils/hmm.ts'
import { onLoad, onShow } from '@dcloudio/uni-app'
const state = reactive({
  type: '',
  filtrate: {
    //请求参数
    size: 10, // 条数
    num: 1 // 页数
  },
  taskList: [], //数据
  show: false,
  inputValue: '',
  maxNum: 100, //最多输入字数
  getObj: {}
})
const inputLength = computed(() => {
  // 已输入的字数
  return state.inputValue ? (state.inputValue.length > 100 ? 100 : state.inputValue.length) : 0
})
const userInfo = ref({})
onLoad((option) => {
  if (option.type) {
    if (option.type == 'blood_pressure') {
      state.type = 'sbp'
    } else if (option.type == 'heart') {
      state.type = 'heart_rate'
    } else if (option.type == 'blood_sugar') {
      state.type = 'fbg'
    } else if (option.type == 'blood_oxygen') {
      state.type = 'spo2'
    } else if (option.type == 'BMI') {
      state.type = 'bmi'
    } else {
      state.type = option.type
    }
  }
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
})
onShow(() => {
  getList()
})

watch(
  () => state.inputValue,
  (newVal, oldVal) => {
    if (newVal && newVal.length > 100) {
      state.inputValue = newVal.substring(0, 100)
    }
  },
  {
    immediate: true
  }
)

const typeFun = () => {
  switch (state.type) {
    case 'bmi':
      return 'BMI'
    case 'whr':
      return '腰臀比'
    case 'sbp':
      return '血压'
    case 'heart_rate':
      return '心率'
    case 'fbg':
      return '血糖'
    case 'spo2':
      return '血氧'
    default:
      return ''
  }
}
// 获取数据
const getList = () => {
  state.taskList = []
  uni.showLoading({
    title: '加载中'
  })
  let param = {
    empi: userInfo.value.empi,
    page: state.filtrate.num,
    limit: 10,
    itemList: []
  }
  if (state.type == 'fbg') {
    let obj1 = 'fbg'
    let obj2 = 'pbg'
    param.itemList.push(obj1)
    param.itemList.push(obj2)
  } else {
    param.itemList.push(state.type)
  }
  healthInfoMapList(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        state.taskList = res.data
      } else {
        state.taskList = []
      }
    }
  })
}

const remarkFun = (item) => {
  state.show = true
  state.inputValue = ''
  state.getObj = item
  state.inputValue = state.getObj.remark
}
const close = () => {
  state.show = false
}
const sure = () => {
  uni.showLoading({
    title: '加载中'
  })
  let param = {
    empi: userInfo.value.empi,
    id: state.getObj.id,
    remark: state.inputValue
  }
  healthInfoUpdate(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      uni.showToast({
        title: '备注成功',
        duration: 2000
      })
      setTimeout(() => {
        state.show = false
        getList()
      }, 2000)
    }
  })
}
</script>

<style lang="scss" scoped>
.wraps {
  min-height: 100vh;
  padding-bottom: 64rpx;
  .content {
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    .card {
      .title {
        font-size: 30rpx;
        color: #222;
        padding: 30rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .source {
          color: #999;
          font-size: 26rpx;
        }
      }
      .item {
        background: #fff;
        border-radius: 12rpx;
        padding: 34rpx 30rpx;
        font-size: 32rpx;
        color: #999;
        margin-top: 30rpx;
        &:nth-of-type(2) {
          margin-top: 0rpx;
        }
        .top {
          position: relative;
          .name {
            display: inline-block;
            vertical-align: middle;
            color: #222;
            font-weight: 700;
          }
          .postprandial {
            display: inline-block;
            vertical-align: middle;
            padding: 4rpx 20rpx;
            border-top-right-radius: 4rpx;
            border-bottom-right-radius: 20rpx;
            border-top-left-radius: 20rpx;
            border-bottom-left-radius: 4rpx;
            margin-left: 20rpx;
            font-size: 24rpx;
            color: #666;
            background: #f5f5f5;
          }
          .status {
            display: inline-block;
            vertical-align: middle;
            font-size: 24rpx;
            padding: 2rpx 20rpx;
            border-radius: 4rpx;
            margin-left: 20rpx;
            font-weight: 700;
            &.red {
              background: rgba(255, 80, 61, 0.1);
              color: #ff503d;
            }
            &.yellow {
              background: rgba(255, 214, 102, 0.1);
              color: #ffd666;
            }
            &.orange {
              background: rgba(255, 129, 60, 0.1);
              color: #ff813c;
            }
            &.green {
              background: rgba(12, 182, 124, 0.1);
              color: #0cb67c;
            }
          }
          .time {
            font-size: 14px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
          }
        }
        .min {
          margin-top: 30rpx;
          position: relative;
          min-height: 40rpx;
          .name {
            display: inline-block;
            vertical-align: middle;
            .num {
              display: inline-block;
              vertical-align: middle;
              color: #333;
              font-weight: 700;
              font-size: 40rpx;
            }
            .unit {
              display: inline-block;
              vertical-align: middle;
              margin-left: 20rpx;
              font-size: 28rpx;
            }
            &:nth-of-type(2) {
              margin-left: 20rpx;
            }
          }
          .remark {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 24rpx;
            color: #00d1b6;
            border: 1px solid #00d1b6;
            border-radius: 24rpx;
            padding: 6rpx 30rpx;
          }
        }
        .bottom {
          margin-top: 32rpx;
          border-top: 1px solid #e5e6eb;
          padding-top: 20rpx;
          font-size: 28rpx;
          color: #222;
          .remark {
            width: 46px;
            display: inline-block;
            vertical-align: top;
          }
          .remarkContent {
            display: inline-block;
            vertical-align: top;
            font-weight: 400;
            box-sizing: border-box;
            color: #666;
            word-wrap: break-word;
            width: calc(100% - 46px);
          }
        }
      }
    }
    .nodate {
      text-align: center;
      .img {
        display: inline-block;
        width: 320rpx;
        height: 240rpx;
        margin-top: 240rpx;
      }
      .nodate_text {
        .name {
          display: block;
          font-size: 28rpx;
          color: #666;
          text-align: center;
          margin-top: 10rpx;
        }
      }
    }
  }
  ::v-deep .u-popup {
    .popup-wrap {
      //   padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
      //   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

      width: 80vw;
      .title {
        padding: 32rpx 32rpx;
        text-align: center;
        font-weight: 700;
        color: #222;
        font-size: 34rpx;
      }
      .textInput {
        position: relative;
        .textarea {
          border: 1px solid #e0e0e0;
          box-sizing: border-box;
          width: calc(100% - 60rpx);
          display: block;
          margin: 0 auto;
          padding: 20rpx;
          height: 260rpx;
          border-radius: 8rpx;
        }
        .text-count {
          box-sizing: border-box;
          width: calc(100% - 60rpx);
          display: block;
          margin: 0 auto;
          padding: 10rpx 0 0rpx;
          text-align: right;
          color: #666;
        }
      }
      .authenticationBtn {
        background: #fff;
        border-bottom-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        .wrapsTwo {
          margin-top: 24rpx;
          text-align: center;
          font-size: 32rpx;
          color: #666;
          border-top: 1rpx solid #e5e6eb;
          .cancel {
            width: calc(50% - 1rpx);
            display: inline-block;
            vertical-align: middle;
            border-right: 1rpx solid #e5e6eb;
            height: 88rpx;
            line-height: 88rpx;
          }
          .goAuthentication {
            width: 50%;
            display: inline-block;
            vertical-align: middle;
            height: 88rpx;
            line-height: 88rpx;
            color: #00d1b6;
          }
        }
      }
    }
    .u-popup__content__close {
      top: 40rpx !important;
      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
    .u-safe-bottom {
      padding-bottom: 0 !important;
    }
  }
}
</style>
